<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css\bootstrap.css">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    
    <style>
        #carousel-inner img {
            width: auto;
            height: auto;
        }
        h1{
            font-family: "宋体";
        }
        .r1c1{
            /* 设置边框 */
            border: 3px solid #fcfafa;
            /* 背景颜色 */
            background-color: rgb(252, 253, 252);
            /* 内边距
            padding: 10px;
             文本居中 
            text-align: center; */
        }
    </style>
    <title>Document</title>
</head>

<body>
    <header>
        <div class="container-fluid">
          
          <nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top">
            <a class="navbar-brand" href="index.html"><img src="./img/logo1.png" alt="" style="width: 100px;"></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
              <span class="navbar-toggler-icon"></span>
            </button>
             
              <!-- Navbar links -->
              <div class="collapse navbar-collapse" id="collapsibleNavbar">
                <ul class="navbar-nav">
                  <li class="nav-item">
                    <a class="nav-link" href="index.html">首页</a>
                  </li>
                  <li class="nav-item active">
                      <a class="nav-link" href="jingguan1.html">热门城市</a>
                    </li> 
                    <li class="nav-item">
                      <a class="nav-link" href="4.0.html">热门景点</a>
                    </li>
                </ul>
                <div class="btn-group">
                  <a href="login.html" class="btn btn-outline-light">登录</a>
              </div>
              </div> 
          </nav>
        </div>
    </header>
    <div class="clear"></div>
<br><br><br><br>
<!-- 定义一个包含轮播图的容器，class="container" -->
    <main class="container ">
        <div class="container">
            <div class="row clearfix">
                 <!-- 定义一个包含轮播图的列，class="col-md-12 column" -->
                <div class="col-md-12 column">
                    <div id="demo" class="carousel slide" data-ride="carousel">
                    <!-- 定义轮播图指示器，class="carousel-indicators" -->
                        <ul class="carousel-indicators">
                            <li data-target="#demo" data-slide-to="0" class="active"></li>
                            <li data-target="#demo" data-slide-to="1"></li>
                            <li data-target="#demo" data-slide-to="2"></li>
                        </ul>
                    <!-- 定义轮播图内容，class="carousel-inner" -->
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <img src="img\zyns1.jpg" class="rounded img-fluid">
                            </div>
                            <div class="carousel-item">
                                <img src="img\wns.jpg" class="rounded img-fluid">
                            </div>
                            <div class="carousel-item">
                                <img src="img\oz.jpg" class="rounded img-fluid">
                            </div>
                        </div>
                           <!-- 定义轮播图控制按钮，class="carousel-control-prev" -->
                        <a class="carousel-control-prev" href="#demo" data-slide="prev">
                            <span class="carousel-control-prev-icon"></span>
                        </a>
                        <a class="carousel-control-next" href="#demo" data-slide="next">
                            <span class="carousel-control-next-icon"></span>
                        </a>

                    </div>
                </div>
            </div>
        </div>
<hr style="border: 1px  solid #fff;">
 <h1 class="text-center"><i><b>2023外国热门旅游城市推荐</b></i></h1>
<hr style="border: 1px  solid #fff;">
    <div class="container mt-2">
        <div class="row r1c1 rounded">
            <div class="col-md-3 col-sm-6">
                <img src="img\msk.jpg" class="img-fluid rounded"  decoding="async">
                <a href="https://travel.qunar.com/p-cs65567-mosike" class="btn btn-light">莫斯科</a>
            </div>
            <div class="col-md-3 col-sm-6">
                <img src="img\jzd.jpg" class="img-fluid rounded" decoding="async">
                <a href="https://travel.qunar.com/p-sf367742-jizhoudao" class="btn btn-light">济州岛</a>
            </div>
            <div class="col-md-3 col-sm-6">
                <img src="img\plws.jpg"class="img-fluid rounded" decoding="async">
                <a href="https://travel.qunar.com/p-cs1002806-puluowangsi" class="btn btn-light">普罗旺斯</a>
            </div>
            <div class="col-md-3 col-sm-6">
                <img src="img\bht1.jpg" class="img-fluid rounded" decoding="async">
                <a href="https://travel.qunar.com/p-sf319239-beihaidao" class="btn btn-light">北海道</a>

            </div>
        </div>
        <div class="row r1c1 rounded">
            <div class="col-md-3">
                <img src="img\mg.jpg" class="img-fluid rounded" decoding="async" >
                <a href="https://travel.qunar.com/p-cs302160-mangu" class="btn btn-light">曼谷</a>
                <div class="t" style="color: rgb(255, 255, 255);">hunan</div>
            </div>
            <div class="col-md-3">
                <img src="img\xwy1.jpg" class="img-fluid rounded" decoding="async">
                <a href="https://travel.qunar.com/p-sf324994-xiaweiyi" class="btn btn-light">夏威夷</a>
            </div>
            <div class="col-md-3">
                <img src="img\mdl4.jpg" class="img-fluid rounded" decoding="async">
                <a href="https://travel.qunar.com/p-cs65553-madeli" class="btn btn-light">马德里</a>
            </div>
            <div class="col-md-3">
                <img src="img\bl3.jpg" class="img-fluid rounded" decoding="async" >
                <a href="https://travel.qunar.com/p-cs65545-bali" class="btn btn-light">巴黎</a>
            </div>
        </div>

        <button type="button" class="btn btn-light disabled mt-2"><h1><b>外国热门景观推荐</b></h1></button>

        <div class="container mt-2">
            <div class="row clearfix r1c1 rounded">
                <div class="col-md-12 column">
                    <div class="row">
                        <div class="col-md-4 ">
                            <div class="thumbnail">
                                <img src="img\dxg.jpg" class="img-fluid rounded">
                                <div class="caption">
                                    <h3 class="text-center">
                                    美国大峡谷
                                    </h3>
                                    <p>
                                        其拥有陡峭的峡谷、多彩的岩石、壮丽峭壁和迷人的沟谷
                                    </p>
                                    <p>
                                        <a class="btn btn-outline-info"
                                            href="daxiagu.html">详细介绍</a>
                                        <a class="btn" href="#">收藏</a>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="thumbnail">
                                <img src="img\aqh.jpg" class="img-fluid rounded">
                                <div class="caption">
                                    <h3 class="text-center">
                                     爱琴海   
                                    </h3>
                                    <p>
                                        爱琴海是西方欧洲文明的摇篮，现代民主的滥觞，更是浪漫情调旅程的象征。
                                    </p>
                                    <p>
                                        <a class="btn btn-outline-info"
                                            href="aiqinhai.html">详细介绍</a>
                                        <a class="btn" href="#">收藏</a>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="thumbnail">
                                <img src="img\dbl.jpg" class="img-fluid rounded">
                                <div class="caption">
                                    <h3 class="text-center">
                                   澳大利亚大堡礁
                                    </h3>
                                    <p>
                                        风平浪静时，游船在此间通过，船下连绵不断的多彩、多形的珊瑚景色。

                                    </p>
                                    <p>
                                        <a class="btn btn-outline-info"
                                            href="dabaojiao.html">详细介绍</a>
                                        <a class="btn" href="#">收藏</a>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 ">
                            <div class="thumbnail">
                                <img src="img\tjl.jpg" class="img-fluid rounded">
                                <div class="caption">
                                    <h3 class="text-center">
                                        印度泰姬陵
                                    </h3>
                                    <p>
                                        泰姬陵因爱情而生，这段爱情的生命也因泰姬陵的光彩被续写，光阴轮回，生生不息。
                                    </p>
                                    <p>
                                        <a class="btn btn-outline-info"
                                            href="taijilin.html">详细介绍</a>
                                        <a class="btn" href="#">收藏</a>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="thumbnail">
                                <img src="img\fss1.jpg" class="img-fluid rounded">
                                <div class="caption">
                                    <h3 class="text-center">
                                        富士山 
                                    </h3>
                                    <p>
                                        映照着能魄白雪，湖光山色，使得富士山的风景幽美。
                                    </p>
                                    <p>
                                        <a class="btn btn-outline-info"
                                            href="fss.html">详细介绍</a>
                                        <a class="btn" href="#">收藏</a>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="thumbnail">
                                <img src="img\medf.jpg" class="img-fluid rounded">
                                <div class="caption">
                                    <h3 class="text-center">
                                        马尔代夫
                                    </h3>
                                    <p>
                                      上浮的海平面让原有的土地面积大幅萎缩，形成马尔代夫群岛
                                    </p>
                                    <p>
                                        <a class="btn btn-outline-info"
                                            href="medf.html">详细介绍</a>
                                        <a class="btn" href="#">收藏</a>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <br><br><br>
<!-- 底部导航栏 -->
<nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-bottom">
    <input type="button" onclick="myFunction1()" class=" text-center btn btn-dark" style="width: 25%;" value="关于我们" />
    <input type="button" onclick="myFunction2()" class=" text-center btn btn-dark" style="width: 25%;" value="联系方式" />
    <input type="button" onclick="myFunction3()" class=" text-center btn btn-dark" style="width: 25%;" value="旗下网站" />
    <input type="button" onclick="myFunction4()" class=" text-center btn btn-dark" style="width: 25%;" value="特别致谢" />
</nav>
</body>
<script>
    function myFunction1(){
      alert("由第15组成员制作");
    }
    function myFunction2(){
      alert("email：1796745716@qq.com");
    }
    function myFunction3(){
      alert("暂时没有");
    }
    function myFunction4(){
      alert("www.baidu.com");
    }
    </script>
</html>